/* Stylesheet for Recipe site*/
body
{
 background-color: #eeeeeee;
 font-family: Verdana, sans-serif;
 font-weight: 400;
 line-height: 1.75;
 color: #222222;
 }
h1, h2, h3, h4, h5
{
 margin: 0;
 margin-bottom: 1.4em;
 font-family: Roboto, sans-serif;
 font-weight: 500;
 line-height: 1.3;
 text-transform: capitalize;
 letter-spacing: 1px;
}
h2
{
 font-siz: 2.4em;
}

h4
{
 font-size: 1.5em;
}
h5
{
 font-size: 1.3em;
}
 
 /*
 ===========
 Navbar
 ===========
 */
 
.navbar
{
 align-items: center;
 justify-content: center;
 }
 
.nav-center
{
 width: 100vw;
 max-width: 1120px;
}

.nav-header
{
 height: 10em;
 justify-content: space-between;
 align-items: center;
 display: grid;
 grid-template-columns: 1fr 1fr;
 }
 
.nav-header img
{
 width: 200px;
}

.nav-logo
{
display: flex;
align-items: flex-start;
}

.nav-links
{
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1em;
 overflow: hidden;
 flex-direction: row;
 transition: 0.3s ease-in-out all;
}

.show-links
{
 height: 23.9em;
}

.nav-link
{
 background: #0F172A;
 display: block;
 text-align: center;
 font-size: 1.75em;
 text-transform: capitalize;
 color: #F8FAFC;
 border-radius: 0.5em;
 letter-spacing: 1px;
 transition: 0.3s ease-in-out all;
 width: 10vw;
}

.nav-link:hover
{
 color: #645CFF;
}

/*
=============
Page
=============
*/

.page
{
 width: 90vw;
 max-width: 1120px;
 margin: 0 auto;
 padding-top: 2em;
 min-height: calc(100vh - 10em);
}

/*
============
Footer
============
*/

.page-footer
{
 text-align: center;
 height: 4em;
 display: flex;
 align-items: center;
 justify-content: center;
 background: #222222;
 color: #ffffff;
 }
 
.page-footer h5
{
 margin-top: 0;
 margin-bottom: 0;
 }
 
.page-footer p
{
 margin-bottom: 0;
}

/*
===========
Hero
===========
*/

.hero
{
 height: 40vh;
 position: relative;
 margin-bottom: 2em;
 background-color: #F8FAFC;
 border-radius: 0.25em;
}

.hero-container
{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 0.25em;
}

.hero-text
{
 color: #ffffff;
 text-align: center;
}

/*
==============
Recipe Template
===============
*/

.recipe-hero
{
 display: grid;
 gap: 3em;
 grid-template-columns: 4fr 5fr;
 align-items: center;
}

.recipe-hero-img
{
 height: 300px;
 border-radius: 0.25em;
}

.recipe-info p
{ 
	color: #475569;
}

.recipe-icons
{
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1em;
 margin: 2em 0;
 text-align: center;
}

.recipe-tags
{
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 font-size: 0.7em;
 font-weight: 600;
}

.recipe-tags a 
{
 background: #645CFF;
 border-radius: 0.5em;
 color: #FFFFFF;
 padding: 0.05em 0.5em;
 margin: 0 0.25em;
 text-transform: capitalize;
}

.recipe-content
{
 display: grid;
 grid-template-columns: 2fr 1fr;
 gap: 2em 5em;
 padding: 3em 0;
}

.single-instruction header
{
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 1.5em;
 align-items: center;
}

.single-instruction header p
{
 text-transform: uppercase;
 font-weight: 600;
 color: #645CFF;
 margin-bottom: 0;
}

.second-column
{
 display: grid;
 row-gap: 2em;
}

.single-ingredient
{
 border-bottom: 2px solid #CBD5E1;
 padding-bottom: 0.75em;
 color: #3C3799;
}

.recipes-container
{
 display: grid;
 gap: 2em 1em;
}

.recipes-list
{
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 2em 1em;
 padding-bottom: 3em;
}
.recipe-img
{
 height: 15em;
 border-redius: 0.5em;
 margin-bottom: 1em;
}

.tags-container
{
 order: 1;
 display: flex;
 flex-direction: column;
 padding-bottom: 3em;
}

.tags-container h4
{
 margin-bottom: 0.5em;
 font-weight: 500;
}

 .tags-list
{
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
}

.tags-list a 
{
text-transform: capitalize;
display: block;
color: #64748B;
transition: 0.3s ease-in-out all;
}

.tags-list a:hover
{
 color: #645CFF;
}